<template>
  <div class="StepWrap">
     <!-- 步骤条 -->
     <div>
       <el-steps :active="stepActive" simple>
        <el-step v-for="item in stepOptions" :key="item.id" :title="item.title" :icon="item.icon" @click.native="handleStep(item.id)"></el-step>
      </el-steps>
     </div>
      
  </div>
</template>

<script>

export default {
  name: 'StepWrap',
  computed:{
    /*~~~~~~~~~~解决数据双向绑定问题 通过get 和set  如果是v-model  可以改为 ：value~~~~~~~~~~*/ 
    stepActive:{
      get(){
        return this.$store.getters.curSubMenuActive
      },
      set(val){
        this.$store.state.subMenu.active = val
      }
    },
    stepOptions(){
      return this.$store.getters.curSubMenu
    }
  },
  beforeCreate(){
    // 初始化菜单
    this.$store.dispatch('changeStepActive',1)
  },
  methods:{
    handleStep(id){
      /*~~~~~~~~~~解决数据双向绑定问题 通过get 和set 依然需要触发 赋值才可以~~~~~~~~~~*/ 
      this.$store.dispatch('changeStepActive',id)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import url('//at.alicdn.com/t/font_1151041_swd3ln69mpe.css')  
.StepWrap
  width 400px
  position absolute
  z-index 50
  top 75px
  left 15px
  background #303030

  .el-steps--simple
    box-shadow 5px 5px 5px rgba(0,0,0,.8)
    padding 10px 8%
    background linear-gradient(to left, rgba(62,73,103,0.7) , rgba(48,58,88,1))

    /deep/ .el-step.is-simple
      cursor pointer

    /deep/ .el-step__head.is-finish
      // color #76b3ae;
      // border-color  #76b3ae;
      color #13ffd7;
      border-color  #13ffd7;
    
    /deep/ .el-step__title.is-finish
      color #13ffd7

    /deep/ .el-step__head.is-process
      color #C0C4CC
    
    /deep/ .el-step__title.is-process
      color #C0C4CC
      font-weight normal

  /deep/ .el-step.is-simple .el-step__arrow::after,/deep/ .el-step.is-simple .el-step__arrow::before
    background #fff   

</style>
